import { useState, useEffect, useContext, useRef } from 'react';
import Recorder from 'recorder-core/recorder.mp3.min';
// import { useHistory } from 'react-router-dom';
import { Input, Grid, Toast, Popup, ImageUploader } from 'antd-mobile';
import {
  AudioOutlined,
  PictureOutlined,
  SmileOutlined,
  PlusCircleOutlined,
  CloseCircleOutlined,
  CameraOutlined,
  VideoCameraOutlined,
  FolderOutlined,
  EnvironmentOutlined,
  ProfileOutlined,
  LinkOutlined,
  UserOutlined,
  // AppstoreOutlined,
  // BellOutlined,
  HolderOutlined,
  InfoOutlined,
} from '@ant-design/icons';

import SendRichText from './SendRichText';
import SendLink from './SendLink';
import SendInstruct from './SendInstruct';
import Rtc from '../../page/Chat/Rtc';
import TakePhoto from './TakePhoto';
import SendUserCard from './SendUserCard';
import SelectAtUser from './SelectAtUser';
import SelectLocaotionInfo from './SelectLocaotionInfo';
import SpeakingToast from '../SpeakingToast';

import { MySdkStoreContext } from '../../context';
import { ContentType, CustomDataType, ConversationType } from '../../constants';
import { symbolEscape, renderMsgBrief } from '../../utils';

import './style.scss';

let chunks = [];
let audioBodyProps = {
  startPageY: 0,
  startTime: 0,
}

export default function(props) {
  // const history = useHistory();
  const mySdkStore = useContext(MySdkStoreContext);
  const inputRef = useRef(null);
  const { onStrechChange, onRtcHangup, replyProps, reEditProps, rtcInvitePageVisible, onRtcVedioEnable, converInfo } = props;
  const { cid } = converInfo;

  // 输入文字框内容
  const [textValue, setTextValue] = useState('');
  const [audioRec, setAudioRec] = useState(null);
  // 是否展示”文字输入框“开关
  const [inputTextVisible, setInputTextVisible] = useState(true);
  // 是否展示”多功能区域“开关
  const [isMessageTypeAreaVisible, setIsMessageTypeAreaVisible] = useState(false);
  // 是否展示”emoji“表情区域开关
  const [isEmojiListAreaVisible, setIsEmojiListAreaVisible] = useState(false);
  // 发送链接组件props
  const [sendLinkProps, setSendLinkProps] = useState({ visible: false });
  // 发送富文本组件props
  const [sendRichTextProps, setSendRichTextProps] = useState({ visible: false });
  // 发送指令消息props
  const [sendInstructProps, setSendInstructProps] = useState({ visible: false });
  // 来源消息props
  const [replySourceMessageProps, setReplySourceMessageProps] = useState({ visible: false });
  // 音视频组件props
  const [rtcPageProps, setRtcPageProps] = useState({ visible: false });
  // 拍摄照片组件props
  const [takePhotoProps, setTakePhotoProps] = useState({ visible: false });
  // 发送语音相关props
  const [audioProps, setAudioProps] = useState({ recorder: null, stream: null, dataChunk: [], startPageY: 0, startTime: 0 });
  // 选择at用户组件props
  const [selectAtUserProps, setSelectAtUserProps] = useState({visible: false});
  // 选择地图位置props
  const [selectLocaotionInfo, setSelectLocaotionInfo] = useState({visible: false});
  // 发送用户卡片组件props
  const [sendUserCardProps, setSendUserCardProps] = useState({visible: false, getListApi: '', onOk: () => {}, onClose: () => {}});
  // 已选中的at用户
  const [atUsers, setAtUsers] = useState([]);
  // 初始emoji表情列表
  const [emojiList, setEmojiList] = useState(mySdkStore.emojiList || []);
  // 按住说话提示组件props
  const [speakingToastProps, setSpeakingToastProps] = useState({ visible: false, status: '' });

  // 设置emojiList
  useEffect(() => {
    if (!emojiList?.length) {
      mySdkStore.sdk.getEmojiById("all").then(data => setEmojiList(data));
    }
  }, []);

  // 如果在聊天窗”撤回的消息“后点击了”重新编辑“，获取当条消息的文字内容
  useEffect(() => {
    if (reEditProps?.text) {
      setTextValue(reEditProps.text);
    }
  }, [reEditProps]);

  // 如果在聊天窗点击了”回复“某条消息，获取本条消息的基本信息
  useEffect(() => {
    if (replyProps) {
      setReplySourceMessageProps({ ...replyProps });
    }
  }, [replyProps]);

  //
  useEffect(() => {
    if (rtcInvitePageVisible === false) {
      setRtcPageProps({ visible: rtcInvitePageVisible });
    }
  }, [rtcInvitePageVisible]);

  // 将软键盘的enter按钮文字更改为”发送“
  useEffect(() => {
    inputRef.current.nativeElement.setAttribute('enterkeyhint', 'send');
  }, [inputRef]);

  // 对方接受音视频邀请回调
  const onParticipantJoinRtcRoom = (res) => {
    const { joinUserId } = res;
    Toast.show(`${joinUserId}已接通`); 
    setRtcPageProps({
      ...rtcPageProps,
      visible: true,
      rtcAction: 'continue',
      onClose: (hangupData) => {
        setRtcPageProps({ visible: false });
        onRtcHangup(hangupData);
      },
    });
  }

  // 对方挂断音视频回调
  const onParticipantLeaveRtcRoom = (res) => {
    const { leaveUserId } = res;
    Toast.show(`${leaveUserId}已挂断`);
    setRtcPageProps({ visible: false });
  }

  // 对方拒绝音视频回调
  const onParticipantRejectRtcInvite = (res) => {
    const { userId } = res;
    Toast.show(`${userId}已拒绝`);
    setRtcPageProps({ visible: false });

    const msgBody = {
      msgType: ContentType.Rtc,
      msgContent: { rtcAction: 'hangUp' }
    };
    const msgParams = mySdkStore.sdk.messageBuilder(msgBody);
    mySdkStore.sdk.sendMessage(msgParams).then(res => {
      onRtcHangup({ ...res, invitedUserRejected: true });
    }).catch(e => {
      Toast.show(e.errorMessage || e.message);
    });
  }

  useEffect(() => {
    mySdkStore.sdk.onParticipantJoinRtcRoom = onParticipantJoinRtcRoom;
    mySdkStore.sdk.onParticipantLeaveRtcRoom = onParticipantLeaveRtcRoom;
    mySdkStore.sdk.onParticipantRejectRtcInvite = onParticipantRejectRtcInvite;
  }, []);

  // 选中@用户确定后回调
  const handleAtOk = (userIds, allInfoUsers) => {
    // userIds = allInfoUsers;
    setAtUsers(userIds);
    const atUsersText = allInfoUsers.map(item => `@${item.nickName} `).join('');
    setTextValue(`${textValue}${atUsersText}`);
    setSelectAtUserProps({ visible: false});
    inputRef.current.focus();
  }

  // 文字输入框onChange事件，如果输入”@“，展示”选择@用户“界面
  const onInputChange = val => {
    setTextValue(val);
    if (ConversationType.Group === converInfo.type && val.endsWith('@')) {
      setSelectAtUserProps({
        visible: true,
        cid,
        onOk: handleAtOk,
        onClose: () => setSelectAtUserProps({ visible: false})
      });
      inputRef.current.blur();
    }
  }

  // 输入链接后点击“发送“回调
  const onSendLink = ({ href, title }) => {
    const msgBody = {
      msgType: ContentType.Url,
      msgContent: {
        href,
        title
      }
    }
    sendMessage(msgBody);
    setSendLinkProps({ visible: false });
  }

  // 输入富文本后点击“发送“回调
  const onSendRichText = (text) => {
    const msgBody = {
      msgType: ContentType.RichText,
      msgContent: {
        contentType: 'html',
        value: text,
        title: '富文本消息'
      }
    }
    sendMessage(msgBody);
    setSendRichTextProps({ visible: false });
  }

  // 输入命令后点击“发送“回调
  const onSendInstruct = (text) => {
    const enc = new TextEncoder();
    const msgBody = {
      msgType: ContentType.Custom,
      msgContent: {
        data: enc.encode(text),
        dataType: CustomDataType.Instruction,
        dataVersion: '0.0.1',
        extInfo: {  },
        bizParams: {},
      }
    }
    sendMessage(msgBody);
    setSendInstructProps({ visible: false });
  }

  // 统一的发送消息方法
  const sendMessage = async (msgBody) => {
    // (@所有人时固定值为[{userId: '__at_all__'}]
    const params = { ...msgBody };

    // 如果是回复消息，设置quoteMessageId
    if (replySourceMessageProps?.msgId) {
      params.quoteMessageId = replySourceMessageProps?.msgId;
    }
    // 如果有@用户，设置atUsers
    if (atUsers.length) {
      params.atUsers = atUsers;
    }

    try {
      // 构建消息体
      const msgParams = mySdkStore.sdk.messageBuilder(params);
      // 发送消息体
      mySdkStore.sdk.sendMessage(msgParams).then((sendResData) => {
        console.log('sendMessage res>>>: ', sendResData);
        if (!sendResData) {
          Toast.show('发送失败');
          return;
        }

        // 如果是回复消息，设置此条消息的quoteReplyInfo
        if (replySourceMessageProps?.msgId) {
          setReplySourceMessageProps({ visible: false });
          sendResData.quoteReplyInfo = {
            quoteMessageId: sendResData.quoteMessageId,
            quoteMessageContent: replyProps.msgContent,
            quoteMessageContentType: replyProps.msgType,
          }
        }
        // if (msgBody.msgContent?.dataType !== CustomDataType.Instruction) {
          // 命令消息不展示在聊天窗
        // onSend(sendResData);
        // }
        return Promise.resolve();
      }).catch(e => {
        Toast.show(e.errorMessage || e.message);
      });
    } catch(e: any) {
      Toast.show(e.errorMessage || e.message);
      return Promise.resolve();
    }
  }

  // 点击发送文字事件
  const handleSendText = async () => {
    if (!textValue.trim()) {
      return;
    }
    // mySdkStore.sdk.setMessageExtraProperty()
    await sendMessage({
      msgType: ContentType.Text,
      msgContent: {
        value: symbolEscape(textValue),
      },
      // extInfo: {
      //   sender: 'motao'
      // },
      // bizParams: {
      //   sender: 'motao'
      // }
    });
    setTextValue('');
    setAtUsers([]);
  }

  // 选择发送地图位置
  const handleSendLocation = async (positionResult) => {
    const { lat, lng, address, nearestJunction, imageFileUrl, imageHeight, imageWidth } = positionResult;
    await sendMessage({
      msgType: 'location',
      msgContent: {
        latitude: lat,
        longitude: lng,
        title: address,
        subTitle: nearestJunction,
        imageFileUrl,
        imageHeight,
        imageWidth
      },
    });
  }

  // 选项图片发送
  const handleSendImage = (event) => {
    const { files } = event.currentTarget;
    sendMessage({
      msgType: ContentType.Image,
      msgContent: {
      value: files[0],
      }
    });
  }

  // 选择发送emoji
  const handleSendEmoji = (emojiData) => {
    const { globalUniqueId: iconId, url: emoji, cn } = emojiData;
    sendMessage({
      msgType: ContentType.Face,
      msgContent: {
        iconId,
        emoji: cn
      }
    });
    setIsEmojiListAreaVisible(false);
  }

  // 点击”音视频通话“按钮
  const handleRtc = async () => {
    try{
      setRtcPageProps({
        visible: true,
        rtcAction: 'invite',
        isVedioEnable: true,
        onVedioEnable: onRtcVedioEnable,
        avatarUrl: converInfo.singleSubUser?.avatarUrl,
        onHangup: () => setRtcPageProps({ visible: false }),
        onClose: (hangupData) => {
          setRtcPageProps({ visible: false });
          onRtcHangup(hangupData);
        },
      });
      await sendMessage({
        msgType: ContentType.Rtc,
        msgContent: { 
          rtcAction: 'invite',
          rtcSlot: {
            publishVideoElementId: 'implusPublishVideoElementId',
            subscribeVideoElementId: 'implusSubscribeVideoElementId',
            subscribeAudioElementId: 'implusSubscribeAudioElementId'
          },
         } //rtcType: 'AUDIO'
      })
    } catch(e: any) {
      Toast.show(e.errorMessage || e.message);
    }
  }

  // 选择文件发送
  const handleSendFile = (event) => {
    const { files } = event.currentTarget;
    if(files.length < 1) return;
    let msgType = ContentType.File;
    // 如果选择发送的文件是video类型，将msgType重置为Video类型
    if (files[0].type?.indexOf('video') > -1) {
      msgType = ContentType.Video;
    }

    // 如果选择发送的文件是audio类型，将msgType重置为语音
    if (files[0].type?.indexOf('audio') > -1) {
      msgType = ContentType.Voice;
    }

    // 如果选择发送的文件是image类型，将msgType重置为image类型
    if (files[0].type?.indexOf('image') > -1) {
      msgType = ContentType.Image;
    }
    sendMessage({
      msgType,
      msgContent: {
        value: files[0],
      }
    });
  }

  // 输入链接后
  const handleSendLink = () => {
    setSendLinkProps({
      visible: true,
      onOk: onSendLink,
      onClose: () => setSendLinkProps({ visible: false }),
    });
  }

  // 点击”富文本“图标，打开”编辑富文本“界面
  const handleSendRichText = () => {
    setSendRichTextProps({
      visible: true,
      onOk: onSendRichText,
      onClose: () => setSendRichTextProps({ visible: false }),
    });
  }

  const handleSendInstruct = () => {
    setSendInstructProps({
      visible: true,
      onOk: onSendInstruct,
      onClose: () => setSendInstructProps({ visible: false }),
    });
  }

  // 点击”拍摄“图标，打开拍摄界面
  const handleTakePhone = () => {
    setTakePhotoProps({
      visible: true,
      onOk: (file) => {
        sendMessage({
          msgType: ContentType.Image,
          msgContent: {
            value: file,
          }
        });
        setTakePhotoProps({ visible: false});
      },
      onClose: () => setTakePhotoProps({ visible: false}),
    })
  }

  const runRecorder = () => {
    let rec = Recorder({
      type:"mp3",sampleRate:16000,bitRate:16 //mp3格式，指定采样率hz、比特率kbps，其他参数使用默认配置；注意：是数字的参数必须提供数字，不要用字符串；需要使用的type类型，需提前把格式支持文件加载进来，比如使用wav格式需要提前加载wav.js编码引擎
    });
    if(!audioRec) setAudioRec(rec);
    rec.open(() => {//打开麦克风授权获得相关资源
      rec.start() 
    },(msg,isUserNotAllow) => {//用户拒绝未授权或不支持
        console.log((isUserNotAllow?"UserNotAllow,":"")+"无法录音:"+msg);
    });
  }

  const stopRecorder = () => {
    if(!audioRec) return;
    audioRec.stop((blob,duration) => {
      console.log(blob,(window.URL||webkitURL).createObjectURL(blob),"时长:"+duration+"ms");
      const file = new File([blob], `${new Date().valueOf()}.mp3`);
      sendMessage({
        msgType: ContentType.Voice,
        msgContent: {
          value: file,
        }
      });
      audioRec.close();//释放录音资源，当然可以不释放，后面可以连续调用start；但不释放时系统或浏览器会一直提示在录音，最佳操作是录完就close掉
      if(audioRec) setAudioRec(null);
    },(msg) => {
        console.log("录音失败:"+msg);
        audioRec.close();//也可以通过stop方法的第3个参数来自动调用close
        if(audioRec) setAudioRec(null);
    });
  }

  // 点击”按住说话“按钮，使用mediaDevices、MediaRecorder进行录音
  const handleStartSpeak = async (event) => {
    setSpeakingToastProps({ visible: true, status: 'speaking' });
    const { pageY } = event.touches[0];

    const { mediaDevices } = window.navigator;
    try {
      /**
       * 录音功能不建议使用浏览器原生api(例如MediaRecorder)，浏览器api本身支撑的录制格式极少且数据的encoder方式特别，
       * 发送到其他端在不同的容器内可能会出现数据缺失无法播放的问题。
       * 建议使用recorder.js这样的具有指定格式录制能力的三方库，三方库一般会通过Worker执行转码运算保证数据结构的标准，
       * recorder.js文档https://github.com/xiangyuecn/Recorder。
       * 如果没有能满足业务格式要求的三方库，可联系sdk开发者，尝试oss服务端转码可行性
       */
      runRecorder();
      setAudioProps({ ...audioProps, startPageY: pageY, startTime: + new Date() });
      audioBodyProps = { startPageY: pageY, startTime: + new Date() }
    } catch{(error) => {
        if (error.name === 'PermissionDeniedError') {
          Toast.show('请先允许权限再尝试');
        } else {
          Toast.show('系统异常');
        }
      }
    }
  }

  // 上滑取消事件
  const handelCancelSpeaking = async (event) => {
    const { pageY } = event.changedTouches[0];
    if (audioBodyProps.startPageY - pageY > 50) {
      setSpeakingToastProps({ visible: true, status: 'cancelling' });
    } else {
      setSpeakingToastProps({ visible: true, status: 'speaking' });
    }
  }

  // 长按结束事件，停止流媒体录制
  const handleEndSpeak = async (event) => {
    stopRecorder();
    setAudioProps({ recorder: null, stream: null, dataChunk: [] });
    const { pageY } = event.changedTouches[0];
    window.getSelection()?.removeAllRanges();
    if (audioBodyProps.startPageY - pageY < 50) {
      setSpeakingToastProps({ visible: false });
      audioProps.recorder?.stop();
    } else {
      setSpeakingToastProps({ visible: false });
    }
  }

  // 选择用户后，点击”发送“用户卡片事件
  const handleSendUserCard = async (userInfo) => {
    const { userName, nickName, userId, avatarUrl } = userInfo;
    const data = { userName, nickName, userId, avatarUrl };
    const enc = new TextEncoder();
    await sendMessage({
      msgType: ContentType.Custom,
      msgContent: {
        // data: new Uint8Array(url),
        data: enc.encode(JSON.stringify(data)),
        dataType: CustomDataType.UserCard,
        dataVersion: '0.0.1',
        extInfo: data,
        bizParams: { },
      }
    });
    setTakePhotoProps({ visible: false });
    setSendUserCardProps({ visible: false });
  }

  // 点击”名片“图片后，展示”选择联系人“界面
  const handleUserCard = async () => {
    setSendUserCardProps({
      visible: true,
      title: '选择联系人',
      cid,
      getListApi: 'queryUsers',
      listFilterFunc: (list) => list.filter(item => item.roleId !== 1),
      onOk: handleSendUserCard,
      onClose: () => setSendUserCardProps({ visible: false})
    });
  }

  // 控制emoji选择区域是否展示
  const toggleEmojiListVisible = () => {
    if (!isEmojiListAreaVisible) {
      setIsEmojiListAreaVisible(true);
      setIsMessageTypeAreaVisible(false);
    } else {
      setIsEmojiListAreaVisible(false);
      setIsMessageTypeAreaVisible(true);
    }
  }

  return <div className="bottomInputBarComponent">
    { replySourceMessageProps.visible && <div className="replySourceArea">
      <div className="topBar">
        <span>
          { replySourceMessageProps.from?.userName || replySourceMessageProps.from?.nickName || replySourceMessageProps.from?.userId }
        </span>
        <CloseCircleOutlined onClick={() => setReplySourceMessageProps({ visible: false })} style={{ fontSize: 15 }} />
      </div>
      <div className="replySourceMessage">
        { renderMsgBrief(replySourceMessageProps) }
      </div>
    </div>
    }
    <div className="inputBar">
      { inputTextVisible ?
        <>
          <AudioOutlined className="left-icon" onClick={() => setInputTextVisible(false)} />
          <Input ref={inputRef} value={textValue} onChange={onInputChange} className="input" placeholder="请输入" enterkeyhint="send" style={{ '--font-size': '14px' }} onEnterPress={handleSendText} />
        </> :
        <>
          <HolderOutlined className="left-icon" onClick={() => setInputTextVisible(true)} />
          <button className="input audioBtnBar" onTouchStart={handleStartSpeak} onTouchEnd={handleEndSpeak} onTouchMove={handelCancelSpeaking} onTouchCancel={handleEndSpeak}>按住说话</button>
        </>
      }
      <SmileOutlined className="side-icon" onClick={() => toggleEmojiListVisible()} />
      { !isMessageTypeAreaVisible ?
        <PlusCircleOutlined className="side-icon" onClick={() => { setIsMessageTypeAreaVisible(true); setIsEmojiListAreaVisible(false); onStrechChange(true);}} /> :
        <CloseCircleOutlined className="side-icon" onClick={() => { setIsMessageTypeAreaVisible(false); onStrechChange(false);}} />
      }
    </div>
    { isMessageTypeAreaVisible &&
      <div className="messageTypeArea">
        {/* <Swiper style={{ '--track-padding': '0 0 16px', '--active-dot-size': '3px' }} indicatorProps={{ color: 'rgba(0,0,0,0.45)', width: '3px' }}> */}
          {/* <Swiper.Item key={1}> */}
          <Grid columns={4} style={{ '--gap-vertical': '12px' }}>
            <Grid.Item className="iconItem fileInputWrap">
              <input type="file" className="fileInput" onChange={handleSendImage} accept="image/*" />
              <PictureOutlined className="supIcon" />
              相册
            </Grid.Item>
            <Grid.Item className="iconItem" onClick={handleTakePhone}>
              <CameraOutlined className="supIcon" />
              拍摄
            </Grid.Item>
            { ConversationType.Single === converInfo.type &&
            <Grid.Item className="iconItem" onClick={handleRtc}>
              <VideoCameraOutlined className="supIcon" />
              音视频通话
            </Grid.Item>
            }
            <Grid.Item className="iconItem fileInputWrap">
              <input type="file" className="fileInput" onChange={handleSendFile} />
              <FolderOutlined className="supIcon" />
              文件
            </Grid.Item>
            <Grid.Item className="iconItem" onClick={() => {
                setSelectLocaotionInfo({
                  visible: true
                });
              }}>
              <EnvironmentOutlined className="supIcon" />
              位置
            </Grid.Item>
            <Grid.Item className="iconItem" onClick={handleSendRichText}>
              <ProfileOutlined className="supIcon" />
              富文本
            </Grid.Item>
            <Grid.Item className="iconItem" onClick={handleSendLink}>
              <LinkOutlined className="supIcon" />
              链接
            </Grid.Item>
            <Grid.Item className="iconItem" onClick={handleUserCard}>
              <UserOutlined className="supIcon" />
              名片
            </Grid.Item>
          </Grid>
          {/* </Swiper.Item> */}
          {/* <Swiper.Item>
            <Grid columns={4} style={{ '--gap-vertical': '12px' }}>
              <Grid.Item className="iconItem">
                <AppstoreOutlined className="supIcon" />
                卡片消息
              </Grid.Item>
              <Grid.Item className="iconItem" onClick={handleSendInstruct}>
                <BellOutlined className="supIcon" />
                推屏（命令）
              </Grid.Item>
            </Grid>
          </Swiper.Item> */}
          {/* </Swiper> */}
      </div>
    }
    {
      isEmojiListAreaVisible &&
      <div className="emojiListArea" style={ { height: isEmojiListAreaVisible ? '290px' : 0, left: isEmojiListAreaVisible ? 0 : '-100%'}}>
        {
          (emojiList && emojiList.length) ?
          emojiList.map(emoji => {
            return <img
              key={emoji.url}
              src={emoji.url}
              onClick={() => handleSendEmoji(emoji)}
              alt="emoji"
              style={{width: '24px', height: '24px', padding: '0 4px' }
            }/>
          }) : null
        }
      </div>
    }
    { sendLinkProps.visible && <Popup visible bodyStyle={{ height: '100%', background: 'rgba(242,244,245,1)' }}><SendLink { ...sendLinkProps } /></Popup>}
    { sendRichTextProps.visible && <Popup visible bodyStyle={{ height: '100%', background: 'rgba(242,244,245,1)' }}><SendRichText { ...sendRichTextProps } /></Popup>}
    { sendInstructProps.visible && <Popup visible bodyStyle={{ height: '100%', background: 'rgba(242,244,245,1)' }}><SendInstruct { ...sendInstructProps } /></Popup>}
    { takePhotoProps.visible && <Popup visible bodyStyle={{ height: '100%', background: '#000' }}><TakePhoto {...takePhotoProps} /></Popup>}
    { rtcPageProps.visible && <Rtc {...rtcPageProps} /> }
    { sendUserCardProps.visible && <SendUserCard {...sendUserCardProps} /> }
    { selectAtUserProps.visible && <SelectAtUser {...selectAtUserProps} /> }
    { speakingToastProps.visible && <SpeakingToast {...speakingToastProps} /> }
    { selectLocaotionInfo.visible && <SelectLocaotionInfo title='选择地址' onOk={(positionResult) => {
      setSelectLocaotionInfo({
        visible: false
      });
      handleSendLocation(positionResult);
    }} onClose={() => {
      setSelectLocaotionInfo({
        visible: false
      });
    }}/> }
  </div>
}